﻿.fui-Row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--spacingHorizontalM) * -1);
    margin-left: calc(var(--spacingHorizontalM) * -1);

    .fui-NoGutters {
        margin-right: 0;
        margin-left: 0;

        > .fui-Column,
        > [class*="fui-Column-"] {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

@include make-grid-columns();



.fui-Grid {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacingHorizontalM);

    @each $breakpoint in map-keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            @if $grid-columns > 0 {
                @for $i from 1 through $grid-rows {
                    &.fui-GridRows#{$infix}-#{$i} {
                        grid-template-rows: repeat($i,minmax(0,1fr));
                    }
                }

                @for $i from 1 through $grid-columns {
                    &.fui-GridColumns#{$infix}-#{$i} {
                        grid-template-columns: repeat($i,minmax(0,1fr));
                    }
                }
            }
        }
    }

    @include make-cssgrid();
}
